<template>
  <div class="">
    <div class="about">
      <top @add="fun1"/>
      <ss @add="fun2"/>
      <hr />
      <table border="1">
        <thead>
          <tr>
            <th>序号</th>
            <th>车型</th>
            <th>添加时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ item.sid }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.time }}</td>
            <td>
              <u @click='remove(index)'>删除</u>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import top from "../components/zy2";
import ss from '../components/Select'
//获取当前年月日星期几几点几分几秒并打印
function getTimer() {
  var date = new Date();
  var week = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星	期四",
    "星期五",
    "星期六"
  ];
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var datee = date.getDate();
  var day = date.getDay();
  var time = year + "-" + month + "-" + datee + "-";
  function getTimerr() {
    var time = new Date();
    var hour = time.getHours();
    hour = hour < 10 ? "0" + hour : hour;
    var minute = time.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var second = time.getSeconds();
    second = second < 10 ? "0" + second : second;
    return hour + ":" + minute + ":" + second;
  }
  return time + " " + getTimerr();
}
export default {
  data() {
    return {
      list: [
        { sid: 1, name: "奥迪", time: getTimer() },
        { sid: 2, name: "宝马", time: getTimer() },
        { sid: 3, name: "奔驰", time: getTimer() },
        { sid: 4, name: "幻影", time: getTimer() },
        { sid: 5, name: "保时捷", time: getTimer() }
      ],
      copylist:[]
    };
  },
  mounted() {
    this.copylist=this.list
  },
  methods: {
    fun1(val1, val2,val3) {
      console.log(val1);
      console.log(val2);
      console.log(val3);
      this.list.push({
        sid: val1,
        name: val2,
        time: getTimer()
      });
    },
    remove(i){
      this.list.splice(i,1)
    },
    fun2(val){
      this.list = this.copylist.filter(item=>{
        return item.name .includes(val)
      })
    }
  },
  components: {
    top,
    ss,
  }
};
</script>

<style lang='scss'>
u {
  text-decoration: none;
  color: skyblue;
}
table {
  margin: 10px auto;
  width: 600px;
}
</style>


